<template>
    <div class="audioplay-container">
        <!-- 封面 -->
        <img class="cover" :src="cover">
        <!-- 主，副标题 -->
        <h3> 夏启的故事：王位应该传给谁</h3>
        <h4> 伍老师</h4>
        <!-- 中间tabbar -->
        <div class="tab-container">
            <div class="tab-item" @click="onCollect">
                <img :src="isLove?'../../src/images/audio_love_collect.png':'../../src/images/audio_love_normal.png'">
            </div>
            <router-link to='/audio-detail' class="tab-item" tag="div">
                <img src="../../images/audio_play_manuscripts.png">
            </router-link>
            <router-link to="/audio-comment" class="tab-item" tag="div">
                <span>10</span>
                <img src="../../images/audio_play_comments.png">
            </router-link>
            <div class="tab-item" @click="onShare">
                <img src="../../images/audio_play_share.png">
            </div>
        </div>
        <!-- 进度条 -->
        <mt-range v-model="rangeValue" :min="10" :max="90" :step="1" :bar-height="2">
            <div slot="start">05:32</div>
            <div slot="end">06:23</div>
        </mt-range>
        <div class="play-slider">
            <span>05:32</span>
            <mu-slider :display-value="display" @change="sliderChange" class="demo-slider" v-model="background"></mu-slider>
            <span>06:23</span>
        </div>
        <!-- 播放按钮 -->
        <div class="play-btns">
            <div class="btn-item" @click="onPlayMode">
                <img :src="isSingle?'../../src/images/audio_play_single.png':'../../src/images/audio_play_sort.png'">
            </div>
            <div class="btn-item" @click="onPlayPrv">
                <img src="../../images/audio_play_prv.png">
            </div>
            <div class="btn-item" @click="onPlayPause">
                <img :src="isPlaying?'../../src/images/audio_play_pause.png':'../../src/images/audio_play_play.png'">
            </div>
            <div class="btn-item" @click="onPlayNext">
                <img src="../../images/audio_play_next.png">
            </div>
            <div class="btn-item" @click="onPlayList">
                <img src="../../images/audio_play_list.png">
            </div>
        </div>
        <!-- 音频列表弹框 -->
        <mt-popup v-model="popupVisible" position="bottom">
            <div class="play-list-container">
                <div class="list-header">
                    <h3>播放列表</h3>
                </div>
                <hr>
                <div class="list-container">
                    <div class="list-item" v-for="(item,i) of playList" :key="i">
                        <div class="list-content" @click="onItemClick(i)">
                            <img v-if="i==playIndex" src="../../images/audio_list_playing.png">
                            <p :class="{'p-playing':i==playIndex}">文学 | 为什么抱元科技没有食堂?</p>
                        </div>
                        <hr>
                    </div>
                </div>
                <div class="list-close" @click="onCloseList">关闭</div>
            </div>
        </mt-popup>
        <!-- 分享框 -->
        <share-pop :show="showShare" @close="closeShare"></share-pop>
    </div>
</template>
<script>
import { Toast } from "mint-ui";
import SharePop from "../commons/Share.vue";
export default {
  data() {
    return {
      isLove: true, //是否已收藏
      isSingle: true, //是否单个循环
      isPlaying: false, //是否正在播放
      popupVisible: false, //是否显示音频列表弹框
      playIndex: 0, //播放第几首
      showShare: false, //是否显示分享框
      playList: [
        //播放列表
        { isPlaying: true },
        { isPlaying: false },
        { isPlaying: false },
        { isPlaying: false },
        { isPlaying: false },
        { isPlaying: false },
        { isPlaying: false },
        { isPlaying: false },
        { isPlaying: false },
        { isPlaying: false },
        { isPlaying: false },
        { isPlaying: false },
        { isPlaying: false },
        { isPlaying: false },
        { isPlaying: false },
        { isPlaying: false },
        { isPlaying: false },
        { isPlaying: false },
        { isPlaying: false }
      ],
      rangeValue: 10,
      cover: "",
      progressColor: "#ff0000",
      background: 12,
      display: false
    };
  },
  components: {
    "share-pop": SharePop
  },
  methods: {
    //进度条拖动
    sliderChange(value) {
      console.log(value);
    },
    //收藏
    onCollect() {
      this.isLove = !this.isLove;
      Toast({
        message: this.isLove ? "已添加到我喜欢的" : "已取消喜欢",
        iconClass: this.isLove ? "collect-icon" : ""
        // duration: -1
      });
    },
    //文稿
    onManuScripts() {},
    //评论
    onComments() {},
    //分享
    onShare() {
      this.showShare = true;
    },
    //分享框关闭
    closeShare() {
      this.showShare = false;
    },
    //切花播放模式
    onPlayMode() {
      this.isSingle = !this.isSingle;
      Toast({
        message: this.isSingle ? "单曲循环" : "列表循环"
      });
    },
    //上一首
    onPlayPrv() {
      Toast({
        message: "这是第一条",
        iconClass: "first-icon"
        // duration: -1
      });
    },
    //播放/暂停
    onPlayPause() {
      this.isPlaying = !this.isPlaying;
    },
    //下一首
    onPlayNext() {
      Toast({
        message: "已经是最后一条",
        iconClass: "last-icon"
        // duration: -1
      });
    },
    //音频列表
    onPlayList() {
      this.popupVisible = true;
    },
    //关闭列表窗口
    onCloseList() {
      this.popupVisible = false;
    },
    //列表Item点击事件
    onItemClick(i) {
      Toast("播放" + i + "首");
      this.playIndex = i;
      this.popupVisible = false;
    }
  }
};
</script>
<style lang="scss">
.audioplay-container {
  display: flex;
  flex-direction: column;
  .cover {
    height: 375px;
    width: 100%;
    background-color: #d5d8de;
  }
  h3 {
    font-size: 16px;
    color: rgb(38, 38, 38);
    text-align: center;
    margin: 20px 0 0 0;
  }
  h4 {
    font-size: 12px;
    color: rgb(118, 118, 118);
    text-align: center;
    margin: 9px 0 0 0;
  }
  .tab-container {
    position: relative;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    margin-top: 32px;
    span {
      position: relative;
      left: 85%;
      top: -56%;
      font-size: 10px;
      color: rgb(146, 145, 150);
    }
    .tab-item img {
      width: 25px;
      height: 25px;
    }
  }
  .mt-range {
    display: none;
    margin-top: 16px;
    align-items: center;
    padding: 12px;
    box-sizing: border-box;
    justify-content: space-between;
    :nth-child(1),
    :nth-child(3) {
      color: rgb(189, 192, 199);
      font-size: 10px;
    }
    .mt-range-content {
      margin: 0 auto;
      width: 74.66666667%;
      margin: 0 16px 0 10px;
      box-sizing: border-box;
    }
    .mt-range-runway {
      width: 100%;
      overflow: hidden;
      border-top-color: rgb(229, 229, 229);
      border-top-style: solid;
    }
    .mt-range-progress {
      background-color: rgb(255, 205, 126);
      height: 2px;
    }
    .mt-range-thumb {
      background-image: url(../../images/audio_play_slider.png);
      background-size: 16px;
      background-color: transparent;
      height: 16px;
      width: 16px;
      position: absolute;
      margin-top: -8px;
      top: 50%;
      background-repeat: no-repeat;
    }
  }

  .play-slider {
    padding: 0 12px;
    margin-top: 16px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    span {
      color: rgb(189, 192, 199);
      font-size: 10px;
    }
    .mu-slider {
      margin: 0 10px;
      .mu-slider-track {
        background-color: rgb(229, 229, 229);
      }
      .mu-slider-fill {
        background-color: rgb(255, 205, 126);
      }
      .mu-slider-thumb {
        background-image: url(../../images/audio_play_slider.png);
        background-size: 16px;
        height: 16px;
        background-color: transparent;
        width: 16px;
        max-width: 16px;
        max-height: 16px;
        border: none;
      }
      .zero .mu-slider-thumb {
        border: none;
      }
    }
  }
  .play-btns {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 29px;
    padding: 0 18px;
    .btn-item {
      display: flex;
      align-items: center;
      width: 18px;
      img {
        vertical-align: middle;
        margin: 0;
        width: 25px;
        height: 23px;
      }
    }
    .btn-item:nth-child(2) {
      margin-left: 20px;
    }
    .btn-item:nth-child(4) {
      margin-right: 20px;
    }
    :nth-child(3) {
      width: 45px;
      height: 45px;
      background-color: #ff8a1f;
      border-radius: 50%;
      justify-content: center;
      img {
        margin-left: 2px;
        width: 13px;
        height: 17px;
      }
    }
  }
}
.mint-popup,
.mint-popup-bottom {
  background-color: transparent;
  width: 100%;
  .play-list-container {
    background-color: white;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    width: 100%;
    .list-header h3 {
      font-size: 14px;
      color: black;
      margin: 0;
      text-align: center;
      padding-bottom: 18px;
      padding-top: 18px;
    }
    hr {
      width: 100%;
      margin: 0;
      background-color: rgb(238, 238, 238);
      height: 1px;
      border: none;
    }
    .list-container {
      overflow: scroll;
      padding-bottom: 10px;
      max-height: 359px;
    }
    .list-item {
      display: flex;
      flex-direction: column;
      padding: 0px 10px;
    }
    .list-content {
      display: flex;
      flex-direction: row;
      align-items: center;
      img {
        margin-right: 10px;
        width: 14px;
        height: 14px;
      }
      p {
        padding: 17px 0;
        margin: 0;
        font-size: 14px;
        color: rgb(22, 35, 60);
      }
      .p-playing {
        font-size: 14px;
        color: rgb(255, 163, 47);
      }
    }
  }
  .list-close {
    font-size: 18px;
    text-align: center;
    width: 100%;
    height: 45px;
    color: rgb(38, 38, 38);
    line-height: 45px;
    background-color: rgb(245, 245, 245);
  }
}

.collect-icon {
  background-image: url(../../images/audio_love_collect.png);
  background-size: 28px;
  background-repeat: no-repeat;
  margin: 0 auto;
  height: 28px;
  width: 28px;
}
.first-icon,
.last-icon {
  background-image: url(../../images/audio_play_tip.png);
  background-size: 28px;
  background-repeat: no-repeat;
  margin: 0 auto;
  height: 28px;
  width: 28px;
}
</style>
